<!--
	课程列表，包含个人信息（隔栏）
-->
<template>
	<div class="course-list-box" v-loading="isLoading">
		<div class="course-card-box">
			<lzk-course-card-item v-for="item in teacherInfoData.courseList"  :course="item"></lzk-course-card-item>
		</div>
	</div>
</template>

<script>
import CourseCardItem from "@/components/CourseCardItem";
import axios from "@/plugins/axios";
import ipconfig from "@/utils/ipconfig";
import {ElMessage} from "element-plus"

export default {
	name: "CourseList",
	data(){
		return {
			/**
			 * 教师登录数据
			 */
			teacherInfoData:this.$store.state.teacherInfoData,
			/**
			 * 控制加载符号展示
			 */
			isLoading:true,
		}
	},
	components:{
		"lzk-course-card-item":	CourseCardItem,
	},
	created() {
		// 有id才请求
		if(this.teacherInfoData.loginInfo.id){
			// 获取所授科目列表
			axios.get(ipconfig.address+"/course/courseList/"+this.teacherInfoData.loginInfo.id).then((response)=>{
				if(response.data.code==200){
					this.teacherInfoData.courseList=response.data.data;
					this.isLoading=false;
				}else{
					ElMessage.warning(response.data.message);
				}
			}).catch((error)=>{
				console.log(error);
			});
		}else{
			// 没得id报错
			ElMessage.warning("获取数据错误，请刷新重试！");
			// location.reload();
		}
	},

}
</script>

<style lang="scss" scoped>
@mixin wh{
	width: 100%;
	height: 100%;
}
.course-list-box{
	@include wh;
	display: flex;
	justify-content: center;

	.course-card-box{
		width: 80%;
		height: 100%;

		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

	}
}
</style>